<template>
  <div>
    <div class="commentWrapper">
      <div class="meta">
        <img class="avatar" src="/static/img/xixi.png" alt />
        <div class="info">
          <div class="name">火星网友</div>
          <div class="time">2小时前</div>
        </div>
        <div class="btnReply" @click="reply">回复</div>
      </div>
      <commentFloor
        v-if="commentItem.parent"
        :floorItem="commentItem.parent"
        :parentLength="parentLength"
        @reply="reply"
      />
      <div class="commentContent">{{commentItem.content}}</div>
    </div>
  </div>
</template>

<script>
import commentFloor from "./commentFloor";
export default {
  components: {
    commentFloor
  },
  props: ["commentItem"],
  data() {
    return {
      parentLength: this.countParent(0, this.commentItem)
    };
  },
  methods: {
    countParent(num, obj) {
      if (obj.parent) {
        return this.countParent(num + 1, obj.parent);
      } else {
        return num;
      }
    },
    reply(data) {
      // 如果这个组件自己触发了事件,那么 data 就是事件对象,不存在id
      // 如果这个事件是从楼层里面穿出来的,就会带上data.id

      // 判断如果有楼层传出来的 data.id   原封不动往外传,如果没有,就带上自己的id
      if (data.id) {
        this.$emit("reply", data);
      } else {
        this.$emit("reply", {
          id: this.commentItem.id
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.commentWrapper {
  padding: 5.556vw 2.778vw;
  border-bottom: 1px solid #e4e4e4;
}
.meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.778vw;
  .avatar {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    object-fit: cover;
  }
  .info {
    flex: 1;
    padding-left: 2.778vw;
    .time {
      font-size: 14px;
      color: #acacac;
    }
  }
  .btnReply {
    font-size: 14px;
    color: #acacac;
  }
}
.commentContent {
  margin-top: 5.556vw;
}
</style>